<template>
  <div :class="prefixCls">
    <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
      <Badge :count="count" dot :numberStyle="numberStyle">
        <BellOutlined/>
      </Badge>
      <template #content>
        <Tabs>
          <template v-for="item in listData" :key="item.key">
            <TabPane>
              <template #tab>
                {{ item.name }}
                <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
              </template>
              <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
              <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick"/>
              <NoticeList :list="item.list" v-else/>
            </TabPane>
          </template>
        </Tabs>
      </template>
    </Popover>
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, onMounted, reactive, ref} from 'vue';
import {Popover, Tabs, Badge} from 'ant-design-vue';
import {BellOutlined} from '@ant-design/icons-vue';
import {tabListData, ListItem} from './data';
import NoticeList from './NoticeList.vue';
import {useDesign} from '@/hooks/web/useDesign';
import {useMessage} from '@/hooks/web/useMessage';
import {useWebSocket} from '@pkg/use'
import {useUserStore} from '@/store/user'
import {getGlobalConfig} from '@/internal/config'

export default defineComponent({
  components: {
    Popover,
    BellOutlined,
    Tabs,
    TabPane: Tabs.TabPane,
    Badge,
    NoticeList,
  },
  setup() {
    let {domainUrl} = getGlobalConfig();
    const {prefixCls} = useDesign('header-notify');
    const {createMessage} = useMessage();
    const listData = ref(tabListData);
    const userStore = useUserStore()
    const count = computed(() => {
      let count = 0;
      for (let i = 0; i < tabListData.length; i++) {
        count += tabListData[i].list.length;
      }
      return count;
    });
    const userId = userStore.getUserInfo?.userId
    const baseUrl = domainUrl.replace('https', 'wss').replace('http', 'ws');
    /**
     * websocket状态
     */
    const state = reactive({
      server: `${baseUrl}websocket/${userId}/1`,
      sendValue: '',
      recordList: [] as { id: number; time: number; res: string }[],
    })
    const {status, data, send, close, open} = useWebSocket(state.server, {
      autoReconnect: true,
      onMessage: (ws, event) => {
        console.info("onMessage:ws:", ws)
        console.info("onMessage:event:", event)
      },
      onError: (ws,event) => {
        console.info("onError:ws:", ws)
        console.info("onError:event:", event)
      },
      heartbeat: {
        message: 'ping',
        interval: 10000,
      },
    })


    function onNoticeClick(record: ListItem) {
      createMessage.success('你点击了通知，ID=' + record.id);
      // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
      record.titleDelete = !record.titleDelete;
    }

    onMounted(() => {
      open();
    });

    return {
      prefixCls,
      listData,
      count,
      onNoticeClick,
      numberStyle: {},
    };
  },
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-notify';

.@{prefix-cls} {
  padding-top: 2px;

  &__overlay {
    min-width: 360px;
    max-width: 360px;
  }

  .ant-tabs-content {
    width: 300px;
  }

  .ant-badge {
    font-size: 18px;
    line-height: 45px;
    height: 56px;

    .ant-badge-multiple-words {
      padding: 0 4px;
    }

    svg {
      width: 0.9em;
    }
  }
}
</style>
